﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js轮播列表</title>

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/table.css" type="text/css" />

<script src="js/jquery.min.js"></script>

</head>
<body>

<div class="lunbo_div">
	<div>
		<img class="cup" src="./images/cup.png" />
		<span class="span_bm">
			<span class="today_title">今日总报名数</span>
			<br />
			<span class="totady_pers">100</span>
		</span>
	</div>
	<div id="bm_content" class="bm_content">
		<table class="table table-condensed ">
			<thead style="position: fixed; background-color: #eeeeee; ">
				<tr>
					<th style=" width: 60px; text-align: right;">用户</th>
					<th style="width: 110px; text-align: center;">购买产品</th>
					<th style=" width: 69px; padding-right: 30px;">时间</th>
				</tr>
			</thead>
			<tbody id="tb1"></tbody>
			<tbody id="tb2"></tbody>
		</table>
	</div>
</div>

<script>

    ; (function ($) {
        var box = document.getElementById("bm_content");
        var l1 = document.getElementById("tb1");
        var l2 = document.getElementById("tb2");
        autoScroll();
        function autoScroll() {
            var product = RenderList();
            l1.innerHTML = product;
            if (l1.offsetHeight > box.offsetHeight) {
                l2.innerHTML = l1.innerHTML;//克隆list1的数据，使得list2和list1的数据一样
                scrollMove = setInterval(scrollup, 30);//数值越大，滚动速度越慢
                box.onmouseover = function () {
                    clearInterval(scrollMove)
                }
            }
        }
        function scrollup() {
            //滚动条距离顶部的值恰好等于list1的高度时，达到滚动临界点，此时将让scrollTop=0,让list1回到初始位置，实现无缝滚动
            if (box.scrollTop >= l1.offsetHeight) {
                box.scrollTop = 0;
            } else {
                box.scrollTop++;
            }
        }
        //鼠标离开时，滚动继续
        box.onmouseout = function () {
            scrollMove = setInterval(scrollup, 30);
        }
        function RenderList() {
            var str = '';
            for (var i = 0; i < 20; i++) {
                var a = i + 1;
                str += '<tr>';
                str += '<td class="ellipsis">';
                str += '<img src="./images/portrait_default.png">';
                str += '<span class="center" title="张三' + a + '" style="margin-left: 10px;">张三' + a + '</span>';
                str += '</td>';
                str += '<td class="ellipsis" title="' + a + '年级上海教育版同步课">' + a + '年级上海教育版同步课</td>';
                str += '<td class="ellipsis" title="16点46分">16点46分</td>';
                str += ' </tr>';
            }
            return str;
        }

    })(jQuery)
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>